table {
  border-collapse: separate;
  border-spacing: 1rem 1rem;
  td {
    span {
      color: red;
    }
  }
}
input,
textarea {
  outline: none;
  padding: 6px;
  width: 20rem;
  border-radius: 3px;
  border: solid 1px rgba(0, 0, 0, 0.08);
  &:focus {
    background-color: rgba(36, 46, 77, 0.05);
    border: solid 1px rgba(43, 167, 248, 0.3);
  }
}

textarea {
  height: 3rem;
  resize: none;
}

select {
  outline: none;
  width: 21rem;
  height: 2rem;
  border-radius: 3px;
  border: solid 1px rgba(0, 0, 0, 0.08);
  &:focus {
    background-color: rgba(36, 46, 77, 0.05);
    border: solid 1px rgba(43, 167, 248, 0.3);
  }
}

button {
  width: 100%;
  height: 2rem;
}

.title {
  font-weight: bold;
}

.input-field {
  position: relative;
  .input-error {
    display: none;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(110%);
    padding: 6px 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: #f9704f;
    background-color: white;
    &::after {
      content: '';
      width: 6px;
      height: 6px;
      background-color: red;
      position: absolute;
      transform: rotate(45deg) translateY(-80%);
      left: 1rem;
      top: 0;
      background-color: white;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  input {
    &.ng-invalid.ng-dirty {
      border: solid 1px transparent;
      &:focus {
        box-shadow: 0 0 0 2px rgba(255, 124, 117, 0.8);
        & + .input-error {
          display: block;
        }
      }
      &:not(:focus) {
        box-shadow: 0 0 0 2px rgba(255, 124, 117, 0.6);
      }
    }
  }
}
